<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

<!--图标-->
<svg aria-hidden="true" style="width: 0;height: 0;">
    <!--右》-->
    <symbol id="icon-turn-right" viewBox="0 0 1024 1024">
        <path d="M366.506667 707.84L561.92 512 366.506667 316.16 426.666667 256l256 256-256 256-60.16-60.16z"></path>
    </symbol>
    <!--左《-->
    <symbol id="icon-turn-left" viewBox="0 0 1024 1024">
        <path d="M657.493333 707.84L462.08 512l195.413333-195.84L597.333333 256l-256 256 256 256 60.16-60.16z"></path>
    </symbol>
    <!--搜索Q-->
    <symbol id="icon-search" viewBox="0 0 1024 1024">
        <path d="M448 53.3504a394.6496 394.6496 0 1 0 255.488 695.4496l163.6352 163.584a32 32 0 0 0 45.2608-45.2608l-163.584-163.584A394.6496 394.6496 0 0 0 448 53.248zM117.3504 448a330.6496 330.6496 0 1 1 661.2992 0 330.6496 330.6496 0 0 1-661.3504 0z"></path>
    </symbol>
    <!--退出x-->
    <symbol id="icon-out" viewBox="0 0 1024 1024">
        <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
    </symbol>
</svg>
<!--页面-->
<div id="root">
    <div id="root-wrapper">
        <!--内容 main-->
        <div id="main">
            <!--总标题-->
            <div class="main-title">
                <h2>学生列表</h2>
            </div>
            <!--块1 学生信息表-->
            <div class="main-block">
                <!--操作栏-->
                <div id="students-manager">
                    <!--编辑按钮-->
                    <div id="students-manager-edit">
                        <button class="manager-button" id="students-manager-edit-delete">删除</button>
                        <button class="manager-button" id="students-manager-edit-add">新增</button>
                    </div>
                    <!--查询框-->
                    <div id="students-manager-search">
                        <!--选择查询列-->
                        <label for="search-columns">查询</label>
                        <select id="search-columns">
                            <option class="search-option" id="search-default"></option>
                            <option class="search-option" id="search-id">学号</option>
                            <option class="search-option" id="search-name">姓名</option>
                            <option class="search-option" id="search-gender">性别</option>
                            <option class="search-option" id="search-academy">学院</option>
                            <option class="search-option" id="search-major">专业</option>
                            <option class="search-option" id="search-telephone">电话号码</option>
                            <option class="search-option" id="search-enrolledDate">入学日期</option>
                        </select>
                        <!--精确查找复选框-->
                        <div id="students-manager-search-accurate-wrapper">
                            <input type="checkbox" id="students-manager-search-accurate">
                        </div>
                        <label for="students-manager-search-accurate">精确查找</label>
                        <!--查询输入框-->
                        <input type="text" id="students-manager-search-input" placeholder="输入查询内容">
                        <!--查询按钮-->
                        <button id="students-manager-search-button">
                        <span role="img" class="icon">
                            <svg width="24px" height="24px" fill="currentColor" style="margin-bottom: -8px">
                                <use xlink:href="#icon-search"></use>
                            </svg>
                        </span>
                        </button>
                        <!--查询取消-->
                        <button id="students-manager-search-cancel">重置</button>
                    </div>
                </div>
                <!--表格-->
                <div class="main-block-table" id="students-content">
                    <div id="no-info">没有找到任何信息！</div>
                    <table id="students-content-table" data-pagination="true" data-size="">
                        <!--表头-->
                        <tbody id="students-content-table-header">
                            <tr>
                                <!--全选-删除复选框-->
                                <th class="table-checkbox" style="width: 37px">
                                    <input type="checkbox" class="check-all" id="select-all">
                                </th>
                                <th style="width: 32px">#</th>
                                <th style="width: 137px">学号</th>
                                <th style="width: 63px">姓名</th>
                                <th style="width: 54px">性别</th>
                                <th style="width: 168px">学院</th>
                                <th style="width: 207px">专业</th>
                                <th style="width: 137px">电话号码</th>
                                <th style="width: 119px">入学日期</th>
                                <th style="width: 144px"></th>
                            </tr>
                        </tbody>
                        <!--表体-->
                        <tbody id="students-content-table-content"><!--动态生成--></tbody>
                    </table>
                </div>
                <!--分页-->
                <div id="table-pagination">
                    <!--数据统计-->
                    <div id="table-pagination-sort">
                        <!--总数目-->
                        共
                        <p id="sort-total" style="display: inline-flex; font-weight: bold">0</p>
                        条数据，
                        <!--每页数目-->
                        <label for="sort-single">每页显示</label>
                        <select id="sort-single">
                            <option class="sort-option" id="sort10" value="10">10</option>
                            <option class="sort-option" id="sort30" value="30">30</option>
                            <option class="sort-option" id="sort100" value="100">100</option>
                        </select>
                        条数据，当前位于第
                        <p id="page" style="display: inline-flex">1</p>
                        页
                    </div>
                    <!--翻页-->
                    <div id="table-pagination-turn">
                        <!--显示页数+翻页-->
                        <div class="table-pagination-turn-wrapper" style="display: inline-flex">
                            <!--左-->
                            <button class="pagination-button" id="table-pagination-turn-left" style="margin-right: 6px"
                                    onclick="previous()">
                                <span role="img" class="icon">
                                    <svg width="24px" height="24px" fill="currentColor">
                                        <use xlink:href="#icon-turn-left"></use>
                                    </svg>
                                </span>
                            </button>
                            <!--1 2 3... 页数按钮-->
                            <div id="pagination-buttons">
                                <button class="pagination-button pagination-button-in pagination-button-main"
                                        style="margin-right: -1px" onclick="goToPage(1)">1
                                </button>
                            </div>
                            <!--右-->
                            <button class="pagination-button" id="table-pagination-turn-right" style="margin-left: 4px"
                                    onclick="next()">
                                <span role="img" class="icon">
                                    <svg width="24px" height="24px" fill="currentColor">
                                        <use xlink:href="#icon-turn-right"></use>
                                    </svg>
                                </span>
                            </button>
                        </div>
                        <!--跳转指定页-->
                        <div id="table-pagination-turn-goto" style="display: inline-block">
                            <label for="table-pagination-turn-goto-input">前往第</label>
                            <input type="text" id="table-pagination-turn-goto-input">
                            页
                            <button id="table-pagination-turn-goto-button">确定</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--新增界面 adder-->
<div class="pop" id="adder" style="display: none">
    <div class="pop-wrapper">
        <!--退出按钮-->
        <div class="out">
            <button class="out-button" id="adder-close">
                    <span role="img" class="icon">
                        <svg width="24px" height="24px" fill="currentColor">
                            <use xlink:href="#icon-out"></use>
                        </svg>
                    </span>
            </button>
        </div>
        <!--输入栏-->
        <div class="input-box">
            <!--标题-->
            <h2>新增学生信息填写表</h2>
            <!--学号-->
            <div class="pop-line-box">
                <label for="adder-id">学号</label>
                <input type="text" name="adder-id" placeholder="11位数字" class="pop-input" id="adder-id">
                <br><span class="error" id="adder-idErr"></span>
            </div>
            <!--姓名-->
            <div class="pop-line-box">
                <label for="adder-name">姓名</label>
                <input type="text" name="adder-name" placeholder="2-8位汉字" class="pop-input" id="adder-name">
                <br> <span class="error" id="adder-nameErr"></span>
            </div>
            <!--性别-->
            <div class="pop-line-box">
                <label id="adder-genders">性别</label>
                <input type="radio" name="adder-gender" class="pop-gender" value="男">男
                <input type="radio" name="adder-gender" class="pop-gender" value="女">女
                <input type="radio" name="adder-gender" class="pop-gender" value="">不选
            </div>
            <!--学院-->
            <div class="pop-line-box">
                <label for="adder-academy">学院</label>
                <input type="text" name="adder-academy" placeholder="学院全名" class="pop-input" id="adder-academy">
                <br><span class="error" id="adder-academyErr"></span>
            </div>
            <!--专业-->
            <div class="pop-line-box">
                <label for="adder-major">专业</label>
                <input type="text" name="adder-major" placeholder="专业全名" class="pop-input" id="adder-major">
                <br><span class="error" id="adder-majorErr"></span>
            </div>
            <!--电话号码-->
            <div class="pop-line-box">
                <label for="adder-telephone">电话号码</label>
                <input type="text" name="adder-telephone" placeholder="8-11位数字" class="pop-input"
                       id="adder-telephone">
                <br><span class="error" id="adder-telephoneErr"></span>
            </div>
            <!--入学日期-->
            <div class="pop-line-box">
                <label for="adder-enrolledDate">入学日期</label>
                <input type="date" name="adder-enrolledDate" class="pop-input" id="adder-enrolledDate">
                <span class="error" id="adder-enrolledDateErr"></span>
                <br>
            </div>
            <!--操作选项-->
            <div class="pop-line-box pop-buttons">
                <button class="pop-button" id="adder-submit">提交</button>
                <button class="pop-button" id="adder-cancel">取消</button>
            </div>
        </div>
    </div>
</div>
<!--修改界面 updater-->
<div class="pop" id="updater" style="display: none">
    <div class="pop-wrapper">
        <!--退出按钮-->
        <div class="out">
            <button class="out-button" id="updater-close">
                    <span role="img" class="icon">
                        <svg width="24px" height="24px" fill="currentColor">
                            <use xlink:href="#icon-out"></use>
                        </svg>
                    </span>
            </button>
        </div>
        <!--输入栏-->
        <div class="input-box">
            <!--标题-->
            <h2>修改学生信息填写表</h2>
            <!--学号-->
            <div class="pop-line-box">
                <label for="updater-id">学号</label>
                <input type="text" name="updater-id" placeholder="11位数字" class="pop-input" id="updater-id" disabled>
                <br> <span class="error" id="updater-idErr"></span>
            </div>
            <!--姓名-->
            <div class="pop-line-box">
                <label for="updater-name">姓名</label>
                <input type="text" name="adder-name" placeholder="2-8位汉字" class="pop-input" id="updater-name">
                <br> <span class="error" id="updater-nameErr"></span>
            </div>
            <!--性别-->
            <div class="pop-line-box"><label id="updater-genders">性别</label>
                <input type="radio" name="updater-gender" class="pop-gender" value="男">男
                <input type="radio" name="updater-gender" class="pop-gender" value="女">女
                <input type="radio" name="updater-gender" class="pop-gender" value="">不选
            </div>
            <!--学院-->
            <div class="pop-line-box"><label for="updater-academy">学院</label>
                <input type="text" name="updater-academy" placeholder="学院全名" class="pop-input" id="updater-academy">
                <br> <span class="error" id="updater-academyErr"></span>
            </div>
            <!--专业-->
            <div class="pop-line-box"><label for="updater-major">专业</label>
                <input type="text" name="updater-major" placeholder="专业全名" class="pop-input" id="updater-major">
                <br> <span class="error" id="updater-majorErr"></span>
            </div>
            <!--电话号码-->
            <div class="pop-line-box"><label for="updater-telephone">电话号码</label>
                <input type="text" name="updater-telephone" placeholder="8-11位数字" class="pop-input"
                       id="updater-telephone">
                <br> <span class="error" id="updater-telephoneErr"></span>
            </div>
            <!--入学日期-->
            <div class="pop-line-box"><label for="updater-enrolledDate">入学日期</label>
                <input type="date" name="updater-enrolledDate" class="pop-input" id="updater-enrolledDate">
                <br> <span class="error" id="updater-enrolledDateErr"></span>
            </div>
            <!--操作选项-->
            <div class="pop-line-box pop-buttons">
                <button class="pop-button" id="updater-submit">提交</button>
                <button class="pop-button" id="updater-cancel">取消</button>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" charset="UTF-8" src="js"></script>

</body>
</html>